import {
  Layout,
  Form,
  Input,
  Button,
  Modal,
  notification,
  message,
} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import React, { useState } from "react";
import "./topHeader.css";

import useStore from "../../utils/myStore";
import request from "../../utils/request";
import { api } from "../../utils/constants";

const { Header } = Layout;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
};

export default function TopHeader(props) {
  const { userData, showLoading, hideLoading, login, logout } = useStore();

  // const [logoutVisible, setLogoutVisible] = useState(false);
  const [visible, setVisible] = useState(false);

  const [form] = Form.useForm();

  const onFinish = (values) => {
    showLoading();
    // console.log("Success:", values);
    setVisible(false);
    request.post(api.sysUserEditPassword, values).then((res) => {
      console.log(res);
      hideLoading();

      if (res.status == 0) {
        message.success("密码修改成功，请重新登录！");
        // setTimeout(()=>{
        login({});
        // },1000)
      }
      // form.resetFields()
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
    // this.setState({ logoutVisible: false, visible: false });
  };

  return (
    <Header
      className="header"
      // theme="light"
      style={{ height: "100px", borderBottom: "1px solid grey" }}
    >
      <img
        src="/imgs/header.jpg"
        alt="广西物业服务行业信用信息管理系统"
        style={{
          position: "absolute",
          width: "100%",
          height: "100px",
          left: 0,
        }}
      />
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          height: "100px",
          width: "100%",
        }}
      >
        <div className="title">
          <div className="zh">绩效管理信息系统</div>
        </div>
        <div className="userInfo">
          <span className="split">
            当前用户：
            {userData.nickName}
          </span>
          <span
            className="split"
            style={{ cursor: "pointer" }}
            onClick={() => setVisible(true)}
          >
            修改密码
          </span>
          <span
            className="split"
            style={{ cursor: "pointer" }}
            onClick={() => {
              Modal.confirm({
                icon: <ExclamationCircleOutlined />,
                content: "确定退出登录？",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                  console.log("OK");
                  // setLogoutVisible(false)

                  showLoading();

                  request.post(api.loginOut, {}).then((res) => {
                    hideLoading();
                    console.log(res);
                    if (res.status == 0) {
                      // logout();
                      window.location.href="/"

                    }
                  });

                  //   logout()
                  // props.callback()
                },
                onCancel() {
                  form.resetFields();
                  console.log("Cancel");
                },
              });
            }}
          >
            退出
          </span>
          <span style={{ cursor: "pointer" }}>反馈</span>
        </div>
      </div>

      <Modal
        visible={visible}
        maskClosable={false}
        title="修改密码"
        // onOk={handleOk}
        onCancel={() => {
          setVisible(false);
          form.resetFields();
        }}
        footer={null}
      >
        <Form
          form={form}
          {...layout}
          name="basic"
          // initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="旧密码"
            name="password"
            rules={[{ required: true, message: "请输入旧密码!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="新密码"
            name="newPassword"
            rules={[{ required: true, message: "请输入新密码!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="确认密码"
            name="confirmPassword"
            dependencies={["newPassword"]}
            rules={[
              { required: true, message: "请输入确认密码!" },
              ({ getFieldValue }) => ({
                validator(rule, value) {
                  if (!value || getFieldValue("newPassword") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject("密码不一致!");
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button
              style={{ marginRight: "20px" }}
              onClick={() => {
                setVisible(false);
                form.resetFields();
              }}
            >
              取消
            </Button>

            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </Header>
  );
}
